<template>
  <div class="app-container">
    <h2>vxe-table scrollTo 鼠标拖拽横向滚动 (Vue2 - Mixin版)</h2>
    <div
      ref="tableContainer"
      class="table-container"
      @mousedown="_handleMouseDown"
      @mouseup="_handleMouseUp"
      @mouseleave="_handleMouseUp"
    >
      <!-- 启用横向滚动，设置固定高度 -->
      <vxe-table
        ref="xTable"
        :data="tableData"
        :scroll-x="{ enabled: true }"
        :height="400"
        :row-config="{ isHover: true }"
        :loading="loading"
      >
        <vxe-column type="seq" width="60" title="#" fixed="left"></vxe-column>
        <vxe-column
          v-for="column in columns"
          :key="column.field"
          :field="column.field"
          :title="column.title"
          :width="column.width"
        ></vxe-column>
        <vxe-column field="action" title="操作" width="150" fixed="right">
          <template #default>
            <vxe-button size="small" status="primary">编辑</vxe-button>
            <vxe-button size="small" status="danger">删除</vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <p>
      提示：在表格区域按住鼠标左键并左右拖动以实现<strong>优化且流畅</strong>的横向滚动
      (使用 scrollTo + 节流)。
    </p>
  </div>
</template>

<script>
// 导入 Mixin
import { draggableScrollMixin } from "@/utils/draggableScrollMixin"; // 确保路径正确

// 如果需要生成测试数据，可以保留原来的逻辑或也做成 Mixin/Util
// import { generateTestData } from './utils'; // 示例

export default {
  name: "OptimizedDraggableScrollTableVue2Mixin",
  // 混入
  mixins: [draggableScrollMixin],
  data() {
    return {
      loading: false,
      tableData: [],
      columns: [],
      // 注意：isDragging, startX, startXScrollLeft, _throttledScrollTo 现在由 Mixin 提供
    };
  },
  mounted() {
    // 生成测试数据
    this.generateTestData(20, 30); // 20行 30列
    // 初始化拖拽滚动功能
    this.$nextTick(() => {
      this.setupDraggableScroll(); // 调用 Mixin 的初始化方法
    });
  },
  beforeDestroy() {
    // 清理拖拽滚动功能
    this.teardownDraggableScroll(); // 调用 Mixin 的清理方法
  },
  methods: {
    // 保留或移动生成测试数据的方法到组件或 utils
    generateTestData(rowCount, colCount) {
      this.loading = true;
      this.$nextTick(() => {
        const data = [];
        const columns = [];
        for (let i = 0; i < colCount; i++) {
          columns.push({
            field: `col_${i}`,
            title: `列 ${i + 1}`,
            width: 150,
          });
        }

        for (let i = 0; i < rowCount; i++) {
          const row = { id: i + 1 };
          for (let j = 0; j < colCount; j++) {
            row[`col_${j}`] = `数据 ${i + 1}-${j + 1}`;
          }
          data.push(row);
        }

        this.columns = columns;
        this.tableData = data;
        this.loading = false;
      });
    },
    // ... 其他组件特有方法
  },
  // 注意：mousemove 事件监听器由 Mixin 在 setupDraggableScroll 中动态管理
};
</script>

<style scoped>
/* ... 你的样式保持不变 ... */
.app-container {
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #2c3e50;
}
.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: grab; /* 默认光标显示可抓取 */
}
.table-container:active {
  cursor: grabbing; /* 按下时显示抓取中 */
}
</style>
